<template>
  <div class="dashboard-container">
    <h2 class="head-big-title">Papan Pemuka</h2>
    <div style="width: 92%;margin: 0 4% 20px 4%">
      <el-card shadow="always" class="one-card" :body-style="{ padding: '15px 0 15px 20px' }">
        <h2 class="title">Jumlah Pesanan</h2>
        <h2 class="count">{{dashboardData.totalPOs}}</h2>
      </el-card>
      <el-card shadow="always" class="one-card" :body-style="{ padding: '15px 0 15px 20px' }">
        <h2 class="title">Jumlah Pesanan Yang Belum Selesai</h2>
        <h2 class="count">{{dashboardData.totalProcessPOs}}</h2>
      </el-card>
      <el-card shadow="always" class="one-card" :body-style="{ padding: '15px 0 15px 20px' }">
        <h2 class="title">Jumlah Pesanan yang Selesai</h2>
        <h2 class="count">{{dashboardData.totalCompletedPos}}</h2>
      </el-card>
      <el-card shadow="always" class="one-card" v-show="role == adminValue" :body-style="{ padding: '15px 0 15px 20px' }">
        <h2 class="title">Jumlah Jualan (MYR)</h2>
        <h2 class="count">{{dashboardData.totalSales}}</h2>
      </el-card>
      <el-card shadow="always" class="one-card" v-show="(role == adminValue)||(role == agencyValue)" :body-style="{ padding: '15px 0 15px 20px' }">
        <h2 class="title">Jumlah Dealer Utama</h2>
        <h2 class="count">{{dashboardData.totalMasterDealers}}</h2>
      </el-card>
      <el-card shadow="always" class="one-card" v-show="(role == adminValue)||(role == dealerMValue)" :body-style="{ padding: '15px 0 15px 20px' }">
        <h2 class="title">Jumlah Dealer</h2>
        <h2 class="count">{{dashboardData.totalDealers}}</h2>
      </el-card>
      <el-card shadow="always" class="one-card" v-show="!(role == dealerValue)" :body-style="{ padding: '15px 0 15px 20px' }">
        <h2 class="title">Jumlah Dealer Yang Menunggu Kelulusan</h2>
        <h2 class="count">{{dashboardData.totalPendingOrder}}</h2>
      </el-card>
    </div>
    <h2 class="big-title">Pesanan Pembelian Melepasi 30 Hari</h2>
    <el-card shadow="always" :body-style="{ padding: '5px' }" style=";width: 100%;border-radius: 10px;background-color: white;text-align: left;clear: both;">
      <div id="orderChart" :style="{ height: '300px' }"></div>
    </el-card>
    <div ></div>
    <h2 class="big-title">Pesanan Pembelian Terkini</h2>
    <div style="width: 96%;margin: 20px 2% 0 2%;padding-left: 10px;border-radius: 20px;background-color: rgb(245,246,247);text-align: left;">
      <div v-for="(item,index) in orderTableData" :key="index" style="width: 100%;border-radius: 10px;background-color: white;padding: 6px 5px 15px 6px;margin-bottom: 10px;">
        <strong style="line-height: 24px;display: inline;">Nombor Pesanan #{{item.oid}}</strong>
        <svg-icon icon-class="ico_view" style="font-size: 24px;float: right;margin-right: 5%;position: relative;bottom: 3px;" @click="handleEditView(item)"></svg-icon>
        <el-divider></el-divider>
        <div style="width: 100%;margin-top: 10px;">
          <strong>{{item.dealerName}}</strong>
          <p>{{item.phoneNumber}}</p>
        </div>
        <div style="width: 100%;margin-top: 10px;">
          <div style="width: 50%;display: inline-block;">
            <strong>Tarikh</strong>
            <p>{{$getTime(item.createdAt)}}</p>
          </div>
          <div style="width: 49%;display: inline-block;">
            <strong>Tarikh Penghantaran</strong>
            <p>{{ item.deliveryAt ? $getTime(item.deliveryAt) : '***' }}</p>
          </div>
        </div>
        <div style="width: 100%;margin-top: 10px;">
          <div style="width: 60%;display: inline-block;">
            <strong>Status</strong>
            <p v-for="(list, index) in $orderStateList" :key="index" v-show="item.state == list.value">{{list.label}}</p>
          </div>
          <div style="width: 40%;display: inline-block;">
            <strong>Jumlah</strong>
            <p>{{$formatMoneyStr(item.subFee)}}</p>
          </div>
        </div>
      </div>
    </div>
    <h2 class="big-title" v-show="role == dealerMValue || role == agencyValue">Pending Approval Dealers</h2>
    <div v-show="role == dealerMValue || role == agencyValue" style="width: 96%;margin: 20px 2% 0 2%;padding-left: 10px;border-radius: 20px;background-color: rgb(245,246,247);text-align: left;">
      <div v-if="!(dealerTableData.length && (dealerTableData.length > 0))" style="width: 100%;text-align: center;line-height: 36px;">
        <strong>No Data</strong>
      </div>
      <div v-else v-for="(item,index) in dealerTableData" :key="index" style="width: 100%;border-radius: 10px;background-color: white;padding: 6px 5px 15px 6px;margin-bottom: 10px;">
        <strong style="line-height: 24px;display: inline;">{{item.dealerName}}</strong>
        <svg-icon icon-class="ico_view" style="font-size: 24px;float: right;margin-right: 5%;position: relative;bottom: 3px;" @click="handleEdit(item)"></svg-icon>
        <svg-icon icon-class="ico_approve" style="font-size: 24px;float: right;margin-right: 5%;position: relative;bottom: 3px;" @click="handleConfirm(item)"></svg-icon>
        <el-divider></el-divider>
        <div style="width: 100%;">
          <div style="width: 60px;height: 60px;display: inline-block;">
            <el-image
              v-if="item.typeCompany"
              style="width: 52px; height: 52px;"
              :src="picbase + item.logoUrl"></el-image>
            <el-image
              v-if="!item.typeCompany"
              style="width: 52px; height: 52px;"
              :src="picbase + item.certificateUrl"></el-image>
          </div>
          <div style="display: inline-block;width: 70%;height: 60px;line-height: 32px;">
            <strong>{{item.dealerName}}</strong>
            <p>{{item.phoneNumber}}</p>
          </div>
        </div>
        <div style="width: 100%;margin-top: 10px;">
          <div style="width: 50%;display: inline-block;">
            <strong>Tarikh</strong>
            <p>{{$getTime(item.createAt)}}</p>
          </div>
          <div style="width: 49%;display: inline-block;">
            <strong>Kod Pendaftaran</strong>
            <p>{{ item.registCode }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { orderRecentApi, adminDashboardApi, queryDealerDashboardApi, agentDashboardApi, masterdealerDashboardApi, dealerDashboardApi, verifyMdealerApi, order_queryApi, query_dealerDealerApi, passOwnerDealerApi } from '@/api/user'
// import router from '@/router'

export default {
  name: 'Report',
  computed: {
    ...mapGetters([
      'role'
    ])
  },
  data() {
    return {
      dashboardData: {},
      orderChartData: [],
      orderTableData: [],
      dealerTableData: [],
      orderChart: '',
      chartWidth: ''
    }
  },
  created() {
    this.chartWidth = (document.documentElement.clientWidth - 16) + 'px'
  },
  mounted() {
    this.loadData()
  },
  methods: {
    getRecentOrderData() {
      orderRecentApi({
        pageIndex: 1,
        pageNum: 5
      }).then(res => {
        this.orderTableData = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    getPendingDealersData() {
      queryDealerDashboardApi({
        pageIndex: 1,
        pageNum: 20
      }).then(res => {
        this.dealerTableData = res.data.records
      }).catch(err => {
        console.log(err)
      })
    },
    transformToChartData(array) {
      let xAxis = {
        xAxisTxt: [],
        xAxisData: []
      }
      var m = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec')

      if (array) {
        if (array.length) {
          if (array.length > 0) {
            for (let i = 0; i < array.length; i++) {
              xAxis.xAxisTxt.push(m[array[i].month - 1] + ' ' + array[i].day)
              xAxis.xAxisData.push(array[i].orderNum)
            }
            return xAxis
          }
        }
      }
    },
    loadData() {
      switch (this.role) {
        case this.adminValue:
          adminDashboardApi().then(res => {
            this.dashboardData = res.data
            this.curMonthOrderNum = res.data.curMonthOrderNum
            this.orderChart = this.$echarts.init(document.getElementById('orderChart'))
            this.drawChart(this.transformToChartData(res.data.curMonthOrderNum))
            this.orderChart.hideLoading()
          }).catch(err => {
            console.log(err)
          })
          this.getRecentOrderData()
          break
        case this.agencyValue:
          agentDashboardApi().then(res => {
            this.dashboardData = res.data
            this.curMonthOrderNum = res.data.curMonthOrderNum
            this.orderChart = this.$echarts.init(document.getElementById('orderChart'))
            this.drawChart(this.transformToChartData(res.data.curMonthOrderNum))
            this.orderChart.hideLoading()
          }).catch(err => {
            console.log(err)
          })
          this.getRecentOrderData()
          this.getPendingDealersData()
          break
        case this.dealerMValue:
          masterdealerDashboardApi().then(res => {
            this.dashboardData = res.data
            this.curMonthOrderNum = res.data.curMonthOrderNum
            this.orderChart = this.$echarts.init(document.getElementById('orderChart'))
            this.drawChart(this.transformToChartData(res.data.curMonthOrderNum))
            this.orderChart.hideLoading()
          }).catch(err => {
            console.log(err)
          })
          this.getRecentOrderData()
          this.getPendingDealersData()
          break
        case this.dealerValue:
          dealerDashboardApi().then(res => {
            this.dashboardData = res.data
            this.curMonthOrderNum = res.data.curMonthOrderNum
            this.orderChart = this.$echarts.init(document.getElementById('orderChart'))
            this.drawChart(this.transformToChartData(res.data.curMonthOrderNum))
            this.orderChart.hideLoading()
          }).catch(err => {
            console.log(err)
          })
          this.getRecentOrderData()
          break
        default:
          this.$message.error('ERROR')
          break
      }
    }, // 得到数据表格
    handleConfirm(row) {
      if (this.role == this.dealerMValue) {
        verifyMdealerApi({ 'id': row.id }).then(res => {
          this.$message({
            message: 'Pass！',
            type: 'success'
          })
          this.loadData()
        }).catch(err => {
          console.log(err)
        })
      } else {
        passOwnerDealerApi(row).then(res => {
          this.$message({
            message: 'Pass！',
            type: 'success'
          })
          this.loadData()
        }).catch(err => {
          console.log(err)
        })
      }
    },
    handleEditView(row) {
      if (this.role == this.dealerValue) {
        this.$router.push('/My-Orders/Edit/' + row.oid)
      } else {
        this.$router.push({path: '/Orders/Edit/' + row.oid})
      }
    },
    handleEdit(row) {
      this.$setDetail(row)
      this.$router.push({path: '/Customers/Detail'})
    },
    drawChart(xAxis) {
      const showd = xAxis.xAxisData.length && (xAxis.xAxisData.length > 0)
      this.orderChart.setOption({
        title: {
          show: !showd,
          text: 'No Data',
          left: 'center',
          top: 'center',
          textStyle: {
            color: 'pink',
            fontSize: 36,
            fontWeight: 278
          }
        },
        tooltip: {
          trigger: 'axis' // axis   item   none三个值
        },
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }],
        xAxis: {
          type: 'category', // 还有其他的type，可以去官网喵两眼哦
          data: xAxis.xAxisTxt // x轴数据
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          orient: 'vertical',
          x: 'center',
          y: 'top',
          data: ['Purchase Order']
        },
        grid: {
          left: '3%',
          right: '3%', // 调整大小
          containLabel: true
        },
        series: [
          {
            name: 'Purchase Order',
            data: xAxis.xAxisData,
            type: 'line'
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.head-big-title{
  text-align: left;
  font-size: 20px;
  margin: 20px 0 15px 3%;
}
.big-title{
  text-align: left;
  font-size: 19px;
  margin: 20px 0 20px 4%;
  clear: both;
}
.dashboard-container{
  margin-top: 20px;
  text-align: center;
}
.one-card{
  width: 100%;
  margin-bottom: 16px;
  display: inline-block;
  height: 88px;
  text-align: left;
  float: left;
  .title{
    display: block;font-size: 15px;margin: 0;
  }
  .count{
    font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
  }
}
</style>
<style scoped>
  /deep/.el-divider{
    margin: 8px 0 10px 0;
  }
</style>
